<template>
  <el-dialog :visible.sync="showEdits" width="700px" :title="title" :destroy-on-close="true"
    custom-class="ele-dialog-form">
    <div class="mo"></div>
    <div id="testbox"   >
      <li :class="item.status == true ? 'actives' : ''" v-for="(item, index) in checkList" :key="index"
        @click="Emaintenance(item, index)">
        {{ item.name }}<i></i>
      </li>
    </div>
    <div class="mo" style="margin-top: 150px"></div>
 
    <div slot="footer" class="bonxt">   
      <excel-export :sheet="sheet">
      <el-button type="primary"   @click="sure">确 认</el-button>
      <el-button @click="showEdits = false"  >返 回</el-button>
      </excel-export>      
    </div>
  </el-dialog>
</template>

<script>
  import { ExcelExport } from "pikaz-excel-js";
  export default {
    name: "ExportDialog",
    components: {
      ExcelExport,
    },
    data() {
      return {
        showEdits: false,
        title: "请选择导出列",
        checkList: [],
        sheet: [],
        dataList: [],
        titleName: "",
      };
    },
    mounted() { },
    methods: {
      Emaintenance(item, index) {
        if (item.status) {
          item.status = false;
          this.checkList.splice(index, 1, item);
        } else {
          item.status = true;
          this.checkList.splice(index, 1, item);
        }
      },
      sure() {
        let arr = [];
        let tHeader = [];
        this.checkList.map((d) => {
          if (d.status) {
            arr.push(d.keys);
            tHeader.push(d.name);
          }
        });
        this.sheet.push({
          title: this.titleName,
          tHeader: tHeader,
          table: this.dataList,
          keys: arr,
          sheetName: this.titleName, //文件名
        });
        this.showEdits = false;
      },
    },
  };
</script>

<style lang='scss' scoped>
  #testbox li {
    text-align: center;
    list-style: none;
    float: left;
    width: 80px;
    height: 25px;
    line-height: 25px;
    border: 2px solid #ced6e0;
    color: #ced6e0;
    margin-top: 8px;
    margin-left: 5px;
    cursor: pointer;
    position: relative;
    font-size: 10px !important;
  }

  .actives {
    font-size: 10px !important;
    text-align: center;
    list-style: none;
    float: left;
    width: 80px;
    height: 25px;
    line-height: 25px;
    border: 2px solid var(--color-primary) !important;
    color: var(--color-primary) !important;
    margin-top: 8px;
    margin-left: 5px;
    cursor: pointer;

    i {
      position: absolute;
      right: 0px;
      bottom: 0px;
      border-bottom: 18px solid var(--color-primary);
      border-left: 18px solid transparent;
    }
  }
</style>